<template>
  <!--总视口-->
  <div class="home-content">
    <!--可以滑动区域-->
    <div class="flex h-full absolute transition-all" :style="{left: leftWidth + 'px'}">
      <!--左侧功能条-->
      <Feature></Feature>
      <!--中间tab区域-->
      <div class="w-[100vw] h-full">
        <van-tabs v-model:active="active" :show-header="!homeStore.showReview" animated @change="changeTab"
                  :title-active-color="homeStore.homeActive == 3 ? '#000' : '#fff'"
                  :style="{'--color': homeStore.homeActive == 3 ? '#000' : '#fff', '--font-color': homeStore.homeActive == 3 ? '#8a8787' : '#b3b3b3'}"
        >
          <van-tab title="热点">
            <div class="flex justify-center items-center h-[200px]">
              内容 1
            </div>
          </van-tab>
          <van-tab title="长视频">
            长视频
          </van-tab>
          <van-tab title="关注">内容 3</van-tab>
          <van-tab title="商城">
            <MallVue></MallVue>
          </van-tab>
          <van-tab title="推荐">
            <Recommended></Recommended>
          </van-tab>
          <template #nav-left>
            <div class="flex justify-center items-center justify-center w-[50px]" @click="updateLeftWidth(0)">
              <van-icon name="bars" size="22" color="#b3b3b3"/>
            </div>
          </template>
          <template #nav-right v-if="homeStore.homeActive != 3">
            <div class="flex justify-center items-center justify-center w-[50px]" @click="searchVisible">
              <van-icon name="search" size="22" color="#fff"/>
            </div>
          </template>
        </van-tabs>
      </div>
      <!--搜索-->
      <SearchContent></SearchContent>
    </div>
  </div>
</template>
<script setup>
import Feature from "@/views/home/components/Feature.vue";
import SearchContent from "@/views/home/components/SearchContent.vue";
import Recommended from "./components/Recommended.vue"
import MallVue from "./mall/index.vue"
import {computed, ref} from "vue";

import useStore from "@/store"


const {homeStore} = useStore()

const active = computed({
  get() {
    return homeStore.homeActive
  },
  set(v) {
    homeStore.homeActive = v
  }
})

const leftWidth = computed(() => homeStore.leftWidth)


// 更新left的值
const updateLeftWidth = (val) => {

  if (val == leftWidth.value) {
    homeStore.updateLeftWidth(-299)
    $bus.emit("updatePlayStatus")
    return
  }
  $bus.emit("updatePlayStatus", "to")
  homeStore.updateLeftWidth(val)
}

// 显示搜索画面
const searchVisible = () => {
  const bodyWidth = document.body.clientWidth;
  const value = leftWidth.value - bodyWidth
  homeStore.updateLeftWidth(value)
  $bus.emit("updatePlayStatus", "to")
}

// tab 切换
const changeTab = (index) => {
  if (index != 4) {
    $bus.emit("updatePlayStatus", "to")
    return
  }
  $bus.emit("updatePlayStatus")
}


</script>
<style scoped lang="scss">
:deep(.van-tabs__nav) {
  background: transparent;
}

:deep(.van-tab) {
  color: var(--font-color);
  font-weight: bold;
}

:deep(.van-tabs__line) {
  background: var(--color);
}

.home-content {
  height: calc(100vh - 60px);
  position: relative;
  overflow: hidden;
}

:deep(.van-tabs__wrap) {
  position: absolute;
  width: 100vw;
  z-index: 999;
}

</style>
